<template>
  <div class="mange">
    <!-- Form -->
    <el-dialog 
    title="新增用户" 
    :visible.sync="dialogFormVisible"
    width="40%"
    :before-close="handleClose" 
     >
      <el-form :inline='true' :rules="rules" ref="form" label-width="80px" :model="form">
        <el-form-item label="姓名" prop='name'>
          <el-input v-model="form.name" autocomplete="off" placeholder="输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="form.age" autocomplete="off" placeholder="输入年龄"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-select v-model="form.sex" placeholder="请选择">
            <el-option label="男" :value="1"></el-option>
            <el-option label="女" :value="0"></el-option>
          </el-select>
        </el-form-item>
         <el-form-item label="出生日期" prop="birth">
            <el-date-picker
              v-model="form.birth"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-DD"
            >
            </el-date-picker>
        </el-form-item>
        <el-form-item label="地址" prop="addr">
          <el-input v-model="form.addr" autocomplete="off" placeholder="输入地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
    <div class="manage-header">
      <el-button type="primary" @click="handleAdd">+新增</el-button>
       <!-- <el-button type="primary" @click="dialogFormVisible = true">搜索</el-button> -->
       <el-form :inline="true" :model="userForm">
                <el-form-item>
                    <el-input placeholder="请输入名称" v-model="userForm.name"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                </el-form-item>
            </el-form>
    </div>
    <div class="common-tabel">
      <el-table
        :data="tableData"
        height="95%"
        style="width: 100%">
        <el-table-column
          prop="name"
          label="姓名"
          >
        </el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          >
          <template slot-scope="scope">
            <span style="margin-left:10px">{{scope.row.sex == 1 ?'男':'女'}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          >
        </el-table-column>
        <el-table-column
          prop="birth"
          label="出生日期"
          >
        </el-table-column>
        <el-table-column
          prop="addr"
          label="地址"
          >
        </el-table-column>
        <el-table-column
          prop="addr"
          label="操作"
          >
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button type="danger" size="mini" @click="handleDelete(scope.row)">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="pager">
                  <el-pagination
                      layout="prev, pager, next"
                      :total="total"
                      @current-change="handlePage">
                  </el-pagination>
      </div>
   </div>
  </div>
</template>
<script>
import { getUser, addUser, editUser, delUser } from '../api'
  export default {
    data() {
      return {
        form: {
          name: '',
          age: '',
          sex: '',
          birth: '',
          addr: ''
        },
        rules: {
          name:[
          {required:true,message:'请输入姓名'}
          ],
          age:[
           { required:true,message:'请输入年龄'}
          ],
           sex:[
           { required:true,message:'请选择性别'}
          ],
           addr:[
           { required:true,message:'请输入地址'}
          ],
           birth:[
           { required:true,message:'请选择出生日期'}
          ],
        },
        gridData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
        dialogTableVisible: false,
        dialogFormVisible: false,
        dialogVisible: false,
        formLabelWidth: '120px',
        tableData: [],
        modalType: 0, // 0表示新增的弹窗， 1表示编辑
        total: 0, //当前的总条数
        pageData: {
                page: 1,
                limit: 12
            },
            userForm: {
                name: ''
            }
      }
    },
    methods: {
      submit() {
        this.$refs.form.validate((valid)=>{
            if(valid){
               if (this.modalType === 0) {
                        addUser(this.form).then(() => {
                            // 重新获取列表的接口
                            this.$refs.form.resetFields()

                            this.getList()

                        })
                    } else {
                        editUser(this.form).then(() => {
                            // 重新获取列表的接口
                            this.getList()
                        })
                    }
              this.$refs.form.resetFields()
              this.dialogFormVisible = false
            }
        })
      },
      handleClose(){
          this.$refs.form.resetFields()
          this.dialogFormVisible = false
      },
      cancel(){
          this.handleClose()
      },
      handleEdit(row) {
            this.dialogFormVisible = true
            this.modalType = 1
            // 注意需要对当前行数据进行深拷贝，否则会出错
            this.form = JSON.parse(JSON.stringify(row))
        },
        handleDelete(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    delUser({ id: row.id }).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        // 重新获取列表的接口
                        this.getList()
                    })
                    
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });          
            });
        },
        handleAdd() {
            // this.$refs.form.resetFields()
            this.modalType = 0
            this.dialogFormVisible = true
        },
         handlePage(val) {
            // console.log(val, 'val')
            this.pageData.page = val
            this.getList()
        },
        // 列表的查询
        onSubmit() {
            this.getList()
        },
        // 获取列表的数据
        getList() {
            // 获取的列表的数据
            getUser({params: {...this.userForm, ...this.pageData}}).then(({ data }) => {
                // console.log(data)
                this.tableData = data.list
                this.total = data.count || 0
            })
        },
    },
    mounted(){
     this.getList()
    }
  }
</script>
<style lang="stylus" scoped> 
.mange
  height 98%
  .manage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    }
  .common-tabel
    position: relative;
    height: calc(100% - 62px);
    .pager 
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translate(-50%)
  
</style>
